<template>
  <el-row type="flex" justify="center"  >
    <el-col :span="6" :offset="18">
      <el-form  >
        <el-form-item  >
          <span style="font-size:38px">欢迎您进入医疗</span>&nbsp;&nbsp;&nbsp;
          <span><span>没有账号？</span> <router-link style="color: #409EFF;text-decoration:none" to="/register">前往注册 </router-link> </span>
        </el-form-item>
        <el-form-item >
          <el-input v-model="loginform.account"  placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input v-model="loginform.password" show-password placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item >
           <el-button @click="login" type="primary" style="width: 100%;">登录</el-button>
           <p><span>忘记密码？</span> <router-link style="color: #409EFF;text-decoration:none" to="/login">前往重置 </router-link> </p>
        </el-form-item>
        </el-form>
    </el-col>

  </el-row>
</template>

<script>
export default {
    data(){
      return{
        loginform:{
          account:'',
          password:'',
        } 
      }
    },
    methods:{
      login(){
        // 用户登录请求
        this.$axios.post('api/user/login',this.loginform)
        .then(resp=>{
          console.log(resp.data);
          if(resp.data.code==200){
            // jwt存入localStorage中
            localStorage.setItem("authorization",resp.data.data.jwt)
            this.$router.push('/')
          }
          if(resp.data.code==2000)
          {
            this.$message.error('账号或密码错误')
          }
          
        })
     
      }
    }
}
</script>

<style scoped>
.el-row{
  /* background: darkslategray; */
  background-image: url('../assets/login.jpg');
  height: 100%;
}
.el-col{
  background: white;
  padding: 15% 20px;
  border-radius: 2px; /*加圆角 */
}
.el-input{
  margin: 8px 1px;
}
</style>
